<template>
	<NavBar title="购物车" @rightTap="search" :left="false" right="search" />
  <view class="shop-cart">
		<view class="content" v-if="goodsList.items?.length">
			<view class="num">
				<view class="label"> 购物数量({{cartNum}}) </view>
			</view>
			<CartItem :param="item" :shopIndex="index" v-for="(item, index) in goodsList.items" :key="item" />
			<view class="btn-box">
				<view class="left" @tap="checkAll">
					<view class="check" :class="isAll?'checked':''"> </view>
					<view class="check-text"> 全选 </view>
				</view>
				<view class="right">
					<view class="checked-text"> 已选{{checkedNum}}件，合计：<text>￥<text>{{checkedPrice}}</text></text></view>
					<view class="btn" @tap="goReset"> 去结算 </view>
				</view>
			</view>
		</view>
		<Empty :txt="token?'购物车空荡荡的~':'您还没有登录，请先登录~'" :btnText="token?'去购物':'去登陆'" @tapBtn="nav" v-else/>
  </view>
	<TabBar :currentPage="2"/>
</template>

<script setup>
	import { computed, ref } from 'vue';
	import { onLoad, onShow, onBackPress } from '@dcloudio/uni-app'
	import NavBar from '@/components/NavBar.vue';
	import TabBar from '@/components/TabBar.vue';
	import CartItem from './components/CartItem.vue';
	import Empty from '@/components/Empty.vue'
	import { useCartStore, useUserStore } from '@/store/index.js'
  const token = computed(() => useUserStore().token)
	// 购物车列表
	const goodsList = computed(() => {
		const { cartList } = useCartStore()
		return useCartStore().cartList
	})
	// 选中的价格
	const checkedPrice = computed(() => {
		const { checkedPrice } = useCartStore()
		return checkedPrice
	})
	// 选中的数量
	const checkedNum = computed(() => {
		const { checkedNum } = useCartStore()
		return checkedNum
	})
  const cartNum = computed(() => {
  	const { cartNum } = useCartStore()
  	return cartNum
  })
	// 是否全选
	const isAll = computed(() => {
		const { isCheckAll } = useCartStore()
		return isCheckAll
	})
	// 选中购物车中的所有商品
	const checkAll = () => {
		const { CHECKALL } = useCartStore()
		CHECKALL()
	}
	// 点击编辑
	const delGoods = () => {
		const { DELCARTGOODS } = useCartStore()
		DELCARTGOODS()
	}
	// 搜索按钮
	const search = () => {
		console.log('search');
	}
	const nav = () => {
    if(token.value) uni.switchTab({ url: '/pages/index/index' })
    else uni.navigateTo({ url: '/pages/login/login' })
  }
	const goReset = () => {
		if(checkedNum.value==0) return
		const { checkedList } = useCartStore()
		const shopIdArr = []
		checkedList.forEach(item => {
			if(shopIdArr.indexOf(item.shop_id)==-1) shopIdArr.push(item.shop_id)
		})
		let params = []
		checkedList.forEach(item => {
			params.push({
				goods_item_id: item.shop_goods_item_id,
				num: item.num,
				goods_name: item.goods_name
			})
		})
		uni.navigateTo({
			url: `/pages/orderConfirm/orderConfirm?params=${JSON.stringify(params)}&shop_id=${shopIdArr.length>1?'':shopIdArr[0]}`
		})
	}
	onLoad(() => {
		uni.hideTabBar()
	})
	onShow(() => {
    const { token } = useUserStore()
		const { GETCARTLIST } = useCartStore()
    if(token) GETCARTLIST()
	})
  onBackPress((e) => {
    if(e.from == 'backbutton') return uni.switchTab({ url: '/pages/index/index' })
  })
</script>

<style scoped lang="scss">
.shop-cart {
	width: 100%;
	padding: 10px 12px;
	padding-bottom: 105px;
	box-sizing: border-box;
	.content {
		.num {
			height: 40px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 10px;
			font-size: 14px;
			font-weight: 400;
			border-radius: 10px;
			margin-bottom: 10px;
			background-color: #fff;
			.label {
				color: #333333;
			}
		}
		.btn-box {
			height: 55px;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 50px;
			background-color: #fff;
			padding: 0 12px;
			// box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
			.left {
				display: flex;
				align-items: center;
				.check {
					width: 20px;
					height: 20px;
					background: url('/static/icon/cart/check.png') no-repeat center center;
					background-size: 100% 100%;
					&.checked {
						background: url('/static/icon/cart/checked.png') no-repeat center center;
						background-size: 100% 100%;
					}
				}
				.check-text {
					color: #666666;
					font-size: 14px;
					font-weight: 400;
					margin-left: 8px;
					line-height: 16px;
				}
			}
			.right {
				display: flex;
				align-items: center;
				.checked-text {
					color: #666666;
					font-size: 12px;
					font-weight: 400;
					text {
						color: #FF3B1E;
						font-size: 14px;
						font-weight: 700;
						text {
							font-size: 20px;
						}
					}
				}
				.btn {
					width: 102px;
					height: 40px;
					color: #FFFFFF;
					font-size: 16px;
					font-weight: 400;
					margin-left: 10px;
					background: #FF3B1E;
					border-radius: 99px;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
			.del {
				.btn {
					width: 102px;
					height: 40px;
					display: flex;
					color: #FF3B1E;
					background: #ffffff;
					border-radius: 99px;
					align-items: center;
					justify-content: center;
					border: 1px solid #FF3B1E;
					box-sizing: border-box;
				}
			}
		}
	}
}
</style>
